<template>
  <div>
    <h_header></h_header>
    <h_right></h_right>
    <!-- 主体部分 -->
    <div>
      <div class="newsList">
        <!-- 开头介绍模块 -->
        <div class="start"></div>
        <!-- 内容卡片 -->
        <div class="newCard">
          <div class="mainContent">
            <div class="major">
              <div class="majorTitle">
                <h2>{{ contentList.title }}</h2>
                <span>{{ contentList.tag1 }}</span>
                <span>{{ contentList.tag2 }}</span>
              </div>
              <div class="majorText">
                <p>
                  {{ contentList.text }}
                </p>
              </div>
            </div>
          </div>
          <div class="pagination">
            <div class="pre" @click="prePage">{{ preText }}</div>
            <div class="next" @click="nextPage">{{ nextText }}</div>
          </div>
          <div class="return1" @click="returnList">返回列表</div>
        </div>
      </div>
    </div>
    <!-- 主体部分结束 -->
    <!-- <h_footer></h_footer> -->
    <hFooter></hFooter>
  </div>
</template>
<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import { majorList } from "@/config/config.js";
export default {
  components: {
    h_header: h_header,
    h_right: h_right,
    hFooter: h_footer,
  },
  data() {
    return {
      //   内容
      majorList: [],
      list: [],
      listTitle: "",
      indexS: 1,
      contentList: [],
    };
  },
  created() {
    this.majorList = majorList;
    this.list = JSON.parse(sessionStorage.getItem("currentList"));
    if (this.contentList.length === 0) {
      this.contentList = this.list;
      this.indexS = this.list.pageIndex;
    }
    // console.log(typeof this.indexS);
    console.log(this.list);
    console.log(this.majorList);
  },
  computed: {
    preText() {
      if (this.indexS - 1 < 0) {
        return "前面没有了";
      } else {
        let i = this.indexS - 1;
        return this.majorList[i].title;
      }
    },
    nextText() {
      if (this.indexS + 1 > 6) {
        return "后面没有了";
      } else {
        let i = this.indexS + 1;
        return this.majorList[i].title;
      }
    },
  },
  methods: {
    prePage() {
      if (this.indexS - 1 < 0) {
        return (this.indexS = 0);
      } else {
        this.indexS -= 1;
        this.contentList = this.majorList[this.indexS];
        // console.log(i);
        // this.listTitle = this.majorList[i].title;
      }
    },
    nextPage() {
      if (this.indexS + 1 > 6) {
        return (this.indexS = 6);
      } else {
        this.indexS += 1;
        this.contentList = this.majorList[this.indexS];
        // this.listTitle = this.majorList[i].title;
      }
    },
    returnList() {
      this.$router.push("/TradeNews");
    },
  },
};
</script>
<style lang="scss">
.newsList {
  width: 100%;
  box-sizing: border-box;
  min-width: 1300px;
}
.start {
  height: 400px;
  background: url("../../../assets/about/about.jpg") no-repeat;
  background-size: 100% 100%;
}

// 主体内容
.newCard {
  padding: 0 150px;
  overflow: auto;
  height: 700px;
  box-sizing: border-box;
  .mainContent {
    width: 900px;
    height: 700px;
    box-shadow: 0 0 15px #aaa;
    position: absolute;
    box-sizing: border-box;
    padding: 50px 30px;
    top: 330px;
    left: 200px;
    z-index: 10;
    background: #fff;
    transform: skewY(-3deg);
    .major {
      transform: skewY(3deg);
      .majorTitle {
        box-sizing: border-box;
        padding: 30px 0;
        border-bottom: 1px solid #ccc;
        h2 {
          margin: 19.92px 0;
        }
        span {
          font-size: 15px;
          color: #aaa;
          margin-left: 20px;
        }
      }
      .majorText {
        height: 350px;
        border-bottom: 1px solid #ccc;
        p {
          margin: 13px 0;
          font-size: 13px;
          text-indent: 2em;
          line-height: 45px;
          color: #666;
        }
      }
    }
  }
  .pagination {
    height: 300px;
    width: 300px;
    background: linear-gradient(to right, rgb(255, 0, 140), pink);
    position: absolute;
    left: 1100px;
    top: 400px;
    z-index: 10;
    box-sizing: border-box;
    padding: 20px;
    transform: skewY(3deg);
    .pre {
      height: 130px;
      width: 250px;
      color: #fff;
      border-bottom: 2px solid #fff;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;
      padding-top: 40px;
    }
    .next {
      height: 130px;
      color: white;
      width: 250px;
      border-top: 1px solid white;
      cursor: pointer;
      text-align: center;
      line-height: 130px;
    }
  }
  .return1 {
    width: 300px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    position: absolute;
    left: 1100px;
    top: 700px;
    background: #ddd;
    z-index: 10;
    transform: skewY(3deg);
  }
}
</style>